<template>
  <div class="revenues-b">
    <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" :border="false" />
    <div class="revenues-b-all">
      <van-cell-group class="revenues-b-allshop" @click="showshop = true" :border="false">
        <!-- <van-cell :value="currshop" is-link arrow-direction="down" /> -->
      </van-cell-group>
      <van-cell-group class="revenues-b-alltime" @click="showdatetime = true" :border="false">
        <van-cell :value="thisMonth" is-link arrow-direction="down" />
      </van-cell-group>
    </div>
    <div class="revenues-b-class">
      <van-tabs v-model="active" @click="tabClick" title-active-color="#1bb89c" color="#1bb89c">
        <van-tab title="日报" class="revenues-b-class-day">
          <p>实收金额</p>
          <span>￥{{ money1 | playvolume }}</span>
          <Details :list="list" />
        </van-tab>
        <van-tab title="周报" class="revenues-b-class-week">
          <p>实收金额</p>
          <span>￥{{ money2 | playvolume }}</span>
          <Details :list="list" />
        </van-tab>
        <van-tab title="月报" class="revenues-b-class-month">
          <p>实收金额</p>
          <span>￥{{ money3 | playvolume }}</span>
          <Details :list="list" />
        </van-tab>
      </van-tabs>
    </div>
    <!-- 门店选择器 -->
    <van-popup v-model="showshop" position="bottom" round>
      <van-picker :columns="allshop" show-toolbar title="选择门店" @cancel="showshop = false" @confirm="onConfirm1" />
    </van-popup>
    <!-- 年月选择器 -->
    <van-popup v-model="showdatetime" position="bottom" round>
      <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @cancel="showdatetime = false" @confirm="onConfirm2" />
    </van-popup>
    <!-- 选择日期 -->
    <van-popup v-model="showdatetime" v-if="active==0" position="bottom" round>
      <van-datetime-picker v-model="currentDate" type="date" title="选择日期" :min-date="minDate" :max-date="maxDate" :formatter="formatter1" @cancel="showdatetime = false" @confirm="onConfirm3" />
    </van-popup>
    <!-- 日历 -->
    <van-calendar v-model="showdatetime" type="range" color="#1bb89c" :allow-same-day="true" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm4" v-if='active==1' />
  </div>
</template>

<script>
import Details from "@/views/financeB/revenuesDetail";
export default {
  name: "Revenue",
  data () {
    return {
      // userid: 0,
      active: 2,
      shopid: '',
      currshop: "全部门店",
      thisMonth: "本月",
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 11, 1),
      currentDate: new Date(),
      showshop: false,
      showdatetime: false,
      allshop: [],
      money1: "",
      money2: "",
      money3: "",
      list: {},
    };
  },

  methods: {
    onClickLeft () {
      this.$router.push({ name: 'controls' })
    },
    tabClick (name) {
      if (name == 0) {
        this.daymoney();
      } else if (name == 1) {
        this.weekmoney();
      } else {
        this.monthmoney()
      }
    },
    // 日报
    daymoney () {
      this.$axios('/finance/shopdayfigure')
        .then((res) => {
          this.list = res.data.data
          this.money1 = res.data.data.amount
        });
    },
    // 周报
    weekmoney () {
      this.$axios('/finance/shopweekfigure')
        .then((res) => {
          this.list = res.data.data
          this.money2 = res.data.data.amount
        });
    },
    // 月报
    monthmoney () {
      this.$axios('/finance/shopyearfigure', {
        time: this.thisMonth,// 月份
      })
        .then((res) => {
          this.list = res.data.data
          this.money3 = res.data.data.amount
        });
    },
    formatter (type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    formatter1 (type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === 'day') {
        return val + '日';
      }
      return val;
    },
    onConfirm1 (shop) {
      if (shop.id == 0) {
        this.$router.go(-1)
      } else {
        this.currshop = shop.text;
        this.shopid = shop.id;
        this.active = 2
        this.monthmoney();
      }
      this.showshop = false;
    },
    onConfirm2 (date) {
      this.thisMonth = `${date.getFullYear()}-${date.getMonth() + 1}`;
      this.monthmoney();
      this.showdatetime = false;
    },
    onConfirm3 (date) {
      this.thisMonth = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.daymoney(this.thisMonth)
      this.showdatetime = false;
    },
    onConfirm4 (date) {
      var statr = `${date[0].getFullYear()}-${date[0].getMonth() + 1}-${date[0].getDate()}`
      var end = `${date[1].getFullYear()}-${date[1].getMonth() + 1}-${date[1].getDate()}`
      this.thisMonth = statr + '~' + end;
      this.weekmoney(statr, end)
      this.showdatetime = false;
    },
    // getAllShop () {
    //   // this.userid = JSON.parse(localStorage.getItem("userInfo")).id;
    //   // userid下的所有门店
    //   this.$axios("/finance/financeshop")
    //     .then((res) => {
    //       if (res.data.code == 1) {
    //         this.allshop = res.data.data.shops.map((v) => {
    //           return {
    //             id: v.id,
    //             text: v.shopname,
    //           };
    //         });
    //         this.allshop.unshift({
    //           text: '全部店铺',
    //           id: '0'
    //         })
    //         this.monthmoney();
    //       } else {
    //         Toast.fail("加载失败,请重试！");
    //       }
    //     })
    //     .catch((err) => {
    //       console.error(err);
    //     });
    // },
  },
  created () {
    var date = new Date()
    this.thisMonth = date.getFullYear() + '-' + (date.getMonth() + 1)
    this.currshop = this.$route.query.name
    this.shopid = this.$route.query.id
    this.monthmoney();
  },
  // 单位格式化过滤器
  filters: {
    playvolume: function (number, decimals, dec_point, thousands_sep) {
      decimals = 2;
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + Math.ceil(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
  },
  components: {
    Details,
  },
};
</script>

<style lang="less" scoped>
.revenues-b {
  display: flex;
  flex-direction: column;
  &-all {
    display: flex;
    justify-content: space-between;
    &-alltime {
      display: flex;
      flex-direction: column;
      width: 50%;
    }
    &-allshop {
      display: flex;
      width: 50%;
      flex-direction: column;
    }
  }
  &-class {
    /deep/ .van-tabs__nav {
      background-color: #f1f1f1;
    }
    &-day,
    &-week,
    &-month {
      display: flex;
      flex-direction: column;
      text-align: center;
      p {
        color: #000;
        font-size: 50px;
        font-weight: bold;
        margin: 40px;
      }
      span {
        font-size: 45px;
        font-weight: bold;
        margin: 50px 0 100px;
      }
    }
  }
}
</style>